import { ICONMapping } from '../../Utils/IconMapping'

import { GetIndexedDB } from '../../Utils/IndexedDB'

import { themeStore } from '../../Config/zustand'
import { ImageUrl } from '../../Config/theme'

const LogoA01 = () => {
    const { logo, menu, updateMenu } = themeStore()
    const { isFold } = menu

    const { logo: Logo, logoBack, logoSize, logoRadio, logoShadowX, logoShadowY, logoShadowS, logoShadowB } = logo
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = logo
    const { btnBack, btnSize, btnRadio, btnShadowX, btnShadowY, btnShadowS, btnShadowB, icon, iconColo, iconSize } = logo

    const onFold = () => {
        const data = { ...menu, isFold: !isFold }
        updateMenu(data)
    }

    const logoStyle = { background: logoBack, width: logoSize, height: logoSize, borderRadius: logoRadio }
    const logoImage = { filter: `drop-shadow(${logoShadowX}px ${logoShadowY}px ${logoShadowS}px ${logoShadowB})` }
    const titleStyle = {
        color: fontColor,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontSize: fontSize,
        filter: `drop-shadow(${fontShadowX}px ${fontShadowY}px ${fontShadowS}px ${fontShadowB})`
    }
    const BtnStyle = {
        background: btnBack,
        width: btnSize,
        height: btnSize,
        borderRadius: btnRadio,
        filter: `drop-shadow(${btnShadowX}px ${btnShadowY}px ${btnShadowS}px ${btnShadowB})`,
        '--iconColor': iconColo,
        '--iconSIze': iconSize
    }
    if (logo) {
        return (
            <div className='LogoA01'>
                <div className='logo' style={logoStyle}>
                    <img src={ImageUrl + Logo} alt="" style={logoImage} />
                </div>
                <div className='title' style={isFold ? { width: 0, ...titleStyle } : { flex: 1, ...titleStyle }}>{title}</div>
                <div className='icon'
                    style={{
                        transform: `${isFold ? 'rotate(180deg)' : 'rotate(0deg)'}`,
                        ...BtnStyle
                    }}
                    onClick={onFold}>
                    {ICONMapping[icon]}
                </div>
            </div>
        )
    }
};

export default LogoA01;